<template>
  <ContentWrap>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="评审内容">
        <div>
          <el-row :gutter="24" justify="space-between">
            <el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24"
                    v-for="(view, index) in viewObjs" :key="index">
              <el-card body-class="" class="image-card">
                <div>
                  <div style="padding: 5px;" v-if="view.content">
                    <el-image v-if="!view.vi" style="border-radius: 5px;"
                              draggable="false"
                              @click.prevent="handleView(view)"
                              class="el-img"
                              :src="view.icon"
                              :title="'点击查看3D'"
                              fit="cover"
                    />
                    <div v-else class="container" style="height: 256px; border-radius: 5px;">
                      <div v-html="view.content"></div>
                    </div>
                  </div>
                  <div v-else style="padding: 5px;">
                    <el-image style="border-radius: 5px;"
                              draggable="false"
                              class="el-img"
                              :src="view.icon"
                              :title="view.name"
                              fit="cover"
                    />
                  </div>
                  <div v-if="view.vi" style="text-align: center; margin-left: 10px;">
                    <el-button type="primary" @click="handleOpen(view)">放大</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="评审说明">
        {{ detailData.threeIntroduce }}
      </el-descriptions-item>
    </el-descriptions>
  </ContentWrap>

  <el-dialog
    title="3D模型查看"
    v-model="showDialog"
    fullscreen
    append-to-body
    destroy-on-close
  >
    <div v-html="threeContent"></div>
  </el-dialog>

</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import * as ThreeDApi from '@/api/bpm/threed'
import {ViewApi} from "@/api/threed";

defineOptions({ name: 'BpmOAThreeDDetail' })

const { query } = useRoute() // 查询参数

const props = defineProps({
  id: propTypes.number.def(undefined)
})
const detailLoading = ref(false) // 表单的加载中
const detailData = ref<any>({}) // 详情数据
const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号

const showDialog = ref(false)
const threeContent = ref('')
const viewObjs = ref([])
/** 获得数据 */
const getInfo = async () => {
  detailLoading.value = true
  try {
    detailData.value = await ThreeDApi.getThreeD(props.id || queryId)
    debugger
    if(detailData.value && detailData.value.threeContent){
      const viewIds = detailData.value.threeContent.split(',')
      for (const viewId of viewIds) {
        const viewObj =  await ViewApi.getView(viewId);
        viewObjs.value.push(viewObj);
      }
    }
  } finally {
    detailLoading.value = false
  }
}

/** 预览按钮操作 */
const handleView = (view) => {
  viewObjs.value.forEach(v => {
    v.vi = false;
  })
  view.vi = true
}
/** 放大按钮操作 */
const handleOpen = (view) => {
    const newWidth = '100%';
    const newHeight = (window.innerHeight - 130) + 'px';
    // 使用正则表达式匹配并替换 width 和 height 的值
    let str = view.content;
    str = str.replace(/width="\d+"/, `width="${newWidth}"`);
    str = str.replace(/height="\d+"/, `height="${newHeight}"`);
    threeContent.value = str;
    showDialog.value = true
}

defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗

/** 初始化 **/
onMounted(() => {
  getInfo()
})
</script>

<style lang="scss">
.image-card {
  margin: 10px;
  height: auto;
  border-radius: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
}
</style>
